<template>
	<view class="uni-input category"
		style="font-size: 28rpx;	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
		<picker @change="bindPickerChange" :value="index" :range="types" range-key="name">
			<text @click="show = true">{{curType}}</text>
		</picker>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type: [String,Number],
				default: ''
			}
		},
		data() {
			return {
				show: false,
				// types: ['商铺专区', '房屋专区', '公寓专区', '写字楼专区'],
				types:[
					{
						id : 1,
						name : '商铺房屋'
					},
					{
						id : 2,
						name : '二手'
					},
					{
						id : 3,
						name : '商家服务'
					},
					{
						id : 4,
						name : '供应链'
					},
					{
						id : 11,
						name : '求购供应链'
					},
					{
						id : 5,
						name : '招工'
					},
					{
						id : 10,
						name : '求职'
					},
					{
						id : 12,
						name : '项目'
					},
					{
						id : 13,
						name : '品牌'
					}
				],
				curType: '',
				index:0,
			}
		},
		watch:{
			value(){
				this.initLabel();
			}
		},
		mounted() {
			this.initLabel();
		},
		methods: {
			close() {

			},
			initLabel(){
				console.log('labelsss',this.value)
				let pt = this.types.filter((item,index)=>{
					if(item.id == this.value){
						this.index = index;
					}
					return	item.id == this.value;
				});
				this.curType = pt.length>0?pt[0].name:this.curType;
			},
			bindPickerChange(e) {
				let pt = this.types[e.detail.value];
				this.$emit('input',pt.id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.category {
		margin-right: 10rpx;
		padding-right: 30rpx;
		position: relative;
		font-size: 16px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		max-width: 140rpx;
		lines: 1;
		text-overflow: ellipsis;

		&::after {
			display: block;
			content: '';
			width: 26rpx;
			height: 16rpx;
			background-image: url('/static/images/city_sanjiao.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -8rpx;
		}
	}
</style>